<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import videos from '../data/videos'
import Hero from '@/components/Hero.vue'
import CategoryBar from '@/components/CategoryBar.vue'
import ContentHeader from '@/components/ContentHeader.vue'
import SectionBlock from '@/components/SectionBlock.vue'
import EmptyState from '@/components/EmptyState.vue'
import RankList from '@/components/RankList.vue'

const route = useRoute()
const q = computed(() => (route.query.q || '').toString().trim().toLowerCase())
const cat = computed(() => (route.query.cat || '').toString())
const categories = Array.from(new Set(videos.map(v => v.category)))

const filtered = computed(() => {
  let list = videos
  if (cat.value) list = list.filter(v => v.category === cat.value)
  if (!q.value) return list
  return list.filter(v =>
    v.title.toLowerCase().includes(q.value) ||
    (v.author && v.author.toLowerCase().includes(q.value)) ||
    (Array.isArray(v.tags) && v.tags.some(t => t.toLowerCase().includes(q.value)))
  )
})

function byCat(name) { return videos.filter(v => v.category === name) }
const rankBase = computed(() => filtered.value.length ? filtered.value : videos)
</script>

<template>
  <div class="home">
    <Hero :show-cta="false" />
    <CategoryBar :categories="categories" />
    
    <div id="main" class="layout">
      <main class="content-main">
        <ContentHeader 
          :subtitle="q ? '搜索: ' + q : (cat ? '分类: ' + cat : '发现好视频')"
        />

        <template v-if="!cat">
          <SectionBlock title="动画精选" :items="byCat('动画')" />
          <SectionBlock title="影视热播" :items="byCat('影视')" />
          <SectionBlock title="科技新知" :items="byCat('科技')" />
          <SectionBlock title="纪录片推荐" :items="byCat('纪录片')" />
        </template>
        <template v-else>
          <SectionBlock :title="cat + '推荐'" :items="filtered" />
          <EmptyState 
            v-if="!filtered.length"
            icon="🔍"
            title="没有找到相关视频"
            description="试试其他关键词或分类"
          />
        </template>
      </main>

      <aside class="sidebar">
        <RankList :items="rankBase" />
      </aside>
    </div>
  </div>
</template>

<style scoped>
.home {
  min-height: 100vh;
}

/* 布局样式 */
.layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
  padding: 0 20px;
}

.content-main {
  position: relative;
}

/* 侧边栏样式 */
.sidebar {
  position: sticky;
  top: 100px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .layout {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    position: static;
    margin-top: 40px;
  }
}

@media (max-width: 768px) {
  .layout {
    gap: 16px;
    padding: 0 16px;
  }
}

@media (max-width: 480px) {
  .layout {
    padding: 0 12px;
  }
}
</style>